<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html dir='ltr'>
<head>
	<title>fugu</title>	
	<!-- jquery -->
	<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
	<script type='text/javascript' src='jquery.blockUI.js'></script>
	
	<!-- jquery ui -->
	<link rel='stylesheet' type='text/css' href='jquery-ui/css/redmond/jquery-ui-1.8.16.custom.css'/>
	<script type='text/javascript' src='jquery-ui/js/jquery-ui-1.8.16.custom.min.js'></script>
	
	<!-- jwysiwyg -->
	<link rel="stylesheet" href="jwysiwyg/jquery.wysiwyg.css" type="text/css"/>
	<script type="text/javascript" src="jwysiwyg/jquery.wysiwyg.js"></script>
	<script type="text/javascript" src="jwysiwyg/controls/wysiwyg.image.js"></script>
	<script type="text/javascript" src="jwysiwyg/controls/wysiwyg.link.js"></script>
	<script type="text/javascript" src="jwysiwyg/controls/wysiwyg.table.js"></script>
	
	<link rel='stylesheet' type='text/css' href='css/site.css'/>
	<script type='text/javascript' src='appcontroller.js'></script>
	
	<script type='text/javascript'>	
	 
	   function SaveView(viewName) {
			var view = window.Views[viewName];
			
			var json_text = JSON.stringify(view);
			
			$.ajax({
			  type: 'POST',
			  url: "/fugu/saveview.fsp",
			  data: json_text,
			  dataType: "json"
			})
			.success(function(data) {})
			.error(function(error) { alert("Error:" + error);})
			.complete(function() { AppController.Loading(false); })
			
			AppController.Loading(true);
	   }
	   
	   function OpenViewDialog(viewName) {
			var view = window.Views[viewName];
			
			$('#wysiwyg').text(view.Content);
			var editor = $('#wysiwyg').wysiwyg({dialog:'jqueryui'});
			$('#wysiwyg').wysiwyg('setContent', view.Content);
				
			var dialog = $('#dialog').dialog({
				title:"View name: " + view.Name,
				modal: true,
				resizable: false,
				position: [100,100],
				height: 600,
				buttons: {
					"Save": function() {
						$(this).dialog("close");
						view.Content = $('#wysiwyg').val();
						SaveView(viewName);
					}, 
					"Cancel": function() { 
						$(this).dialog("close"); 
					} 
				}
			}).ready(function () {
				$('#dialog').dialog({width:editor.width()-60});
			});
	   }
	   	
	   function CreateViewsList(viewsList) {
			window.Views = {};
			var items = [];
			$.each(viewsList, function(key, val) {
				window.Views[val.Name] = val;
				items.push("<li><a class='menulink' href=javascript:OpenViewDialog('" + val.Name +"')>" + val.Name + "</a></li>");
			});
			$('<ul/>', { html: items.join('') }).appendTo($('#viewsList'));
	   }
	   
	   function LoadViews() {
			$('#viewsList').empty();
			$.ajax({
			  type: 'POST',
			  url: "/fugu/getallviews.fsp",
			  data: "",
			  dataType: "json"
			})
			.success(function(data) { 
				if(data.Error.Blocked==true) alert("Error1: " + data.Error.Message);
				else CreateViewsList(data.Json);
			})
			.error(function(data) { alert("Error");})
			.complete(function(data) { AppController.Loading(false); })
			
			AppController.Loading(true);
	   }
	   
	</script>
	
</head>
<body>

<div id='container'>

	<div id="dialog" style="display:none">
		<textarea id="wysiwyg" rows="5" cols="100"></textarea>
	</div>
		
	<div  id='header'>
			<div id="headerimg"></div>
			
			<div id='navigation'>
				<ul>
					<li><a href='javascript:AppController.LoadView("home")'>Home</a></li>
					<li><a href='javascript:AppController.LoadView("Play")'>Play</a></li>
					<li><a href='javascript:AppController.LoadView("Editor")'>Editor</a></li>
					<li><a href='javascript:AppController.LoadView("Profile")'>Profile</a></li>
					<li><a href='javascript:AppController.LoadView("Forum")'>Forum</a></li>
					<li><a href='javascript:AppController.LoadView("About")'>About</a></li>
				</ul>
			</div>	
	</div>

	<table>
		<tr>
			<td>
				<div class='content' style='right:82.5%;'>
						<ul style='list-style-type:none'>
							<li><a class='menulink' href='javascript:LoadViews()'>Load views</a></li>
							<li><a class='menulink' href='#'>Create view</a></li>
							<li><a class='menulink' href='#'>Delete selected</a></li>
						</ul>	
				</div>
			</td>
			<td>
				<div class='content' style='left:16.8%'>
					<div id='viewsList'></div>					
				</div>
			</td>
		</tr>
	<table>
	

	
</div>	
		
</body>
</html>